<template>
    <div id="mainBar" v-bind:style="navBacColor">
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: 'mainBar',
    props:{
        //设置导航的背景颜色
        navBarBacgroundcolor:{
            type:String,
            default:"rgba(56, 134, 72, 0.8)"
        }
    },
    computed:{
        //获取父组件传入的颜色不传则为默认值
        navBacColor(){
            return { backgroundColor:this.navBarBacgroundcolor }
        }
    }
}
</script>

<style scoped>
#mainBar{
    display: flex;
    box-shadow: -2px -2px 3px #000;
    height: 50px;
    overflow: hidden;
}
</style>